<template>
  <div style="padding: 10px">
    <!--    搜索区域-->
    <div style="margin: 10px 0">
      <el-input v-model="search" placeholder="请输入关键字" style="width: 20%" clearable></el-input>
      <el-button type="primary" style="margin-left: 5px" @click="load">查询</el-button>
    </div>
    <el-table
        v-loading="loading"
        :data="tableData"
        border
        :cell-style="rowStyle"
        stripe
        style="width: 100%">
      <el-table-column
          prop="id"
          label="ID"
          sortable
          width="80"
      >
      </el-table-column>
      <el-table-column
          prop="modular"
          label="操作模块">
      </el-table-column>
      <el-table-column
          prop="type"
          label="操作类型">
      </el-table-column>
      <el-table-column
          prop="detail"
          label="操作描述">
      </el-table-column>
      <el-table-column
          prop="method"
          label="请求方法">
      </el-table-column>
      <el-table-column
          prop="requestparam"
          label="请求参数">
      </el-table-column>
      <el-table-column
          prop="responseparam"
          label="返回结果"
          :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
          prop="ip"
          label="请求IP">
      </el-table-column>
      <el-table-column
          prop="userid"
          label="请求用户id">
      </el-table-column>
      <el-table-column
          prop="username"
          label="请求用户名">
      </el-table-column>
      <el-table-column
          prop="uri"
          label="请求URI">
      </el-table-column>
      <el-table-column
          prop="createtime"
          label="创建时间">
      </el-table-column>
      <el-table-column
          prop="version"
          label="操作版本">
      </el-table-column>
    </el-table>

    <div style="margin: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>


  </div>
</template>

<script>

import logs from '@/api/log'

export default {
  name: 'querylog',
  data() {
    return {
      loading: true,
      form: {},
      dialogVisible: false,
      search: '',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
    }
  },
  created() {
    this.load()
  },
  methods: {
    rowStyle() {
      return "text-align:center";
    },
    load() {
      this.loading = true
      logs.getTrueList(this.currentPage,this.pageSize,this.search).then(res => {
        this.loading = false
        this.tableData = res.data.records
        this.total = res.data.total
        console.log(res,"res.data")
      })
    },
    handleSizeChange(pageSize) {   // 改变当前每页的个数触发
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {  // 改变当前页码触发
      this.currentPage = pageNum
      this.load()
    }
  }
}
</script>
